define([
    'jQuery',
    'Underscore',
    'Backbone',
    'Kendo',
    'i18n!nls/language',
    'models/treespecie',
    'datasources/treespecie'
], function($, _, Backbone, Kendo, i18n, Treespecie, treespecieDatasource) {

    
    
    var treespecieTabView = kendo.observable({
    
        
        
        createOverviewTable: function() {
            
            // create the grind containing the update elements
            $("#treespecie_grid").kendoGrid({
                dataSource: treespecieDatasource,
                columns: [{
                        field: "id",
                        title: i18n.treespecie.grid.column.id,
                        width: 80,
                    }, { 
                        field: "latinname",
                        title: i18n.treespecie.grid.column.latinname, 
                    }, { 
                        field: "popularname",
                        title: i18n.treespecie.grid.column.popularname, 
                    }],
                toolbar: [{ 
                        name: "create",
                        text: i18n.grid.button.create,
                    }, {
                        name: "save",
                        text: i18n.grid.button.save,
                    }, { 
                        name : "cancel",
                        text: i18n.grid.button.cancel,
                    }],
                sortable: true,
                pageable: {
                    input: true,
                    refresh: true,
                    pageSizes: [5,10,20,50,100],
                    messages: i18n.grid.message
                },
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                editable: true
            });
            
        },
        

        
        renderSubviews: function() {
            
            this.createOverviewTable();
            
        },
        
        
        
        // self executing function acts like a constructor (hence the name)
        __construct: (function(self, window, undefined) {
            
            // do nothing right now...
// console.log('treespecieTabView initialized!');
            
        })(this, window)
        

    
    });
    
    
//    var treespecieTabView = Backbone.View.extend({
//    
//
//        // main page element
//        el: $("#treespecie_tab"),
//        
//        
//        
//        initialize: function() {
//        
//            // render my own view
//            this.render();
//        
//        },
//        
//
//
//        render: function() {
//
//            // render the main template to the main element
//            this.$el.html(treespecieOverviewTemplate);
//
//            // create the grind containing the update elements
//            $("#treespecie_grid").kendoGrid({
//                dataSource: treespecieDatasource,
//                columns: [{
//                        field: "id",
//                        title: i18n.treespecie.grid.column.id,
//                        width: 80,
//                    }, { 
//                        field: "latinname",
//                        title: i18n.treespecie.grid.column.latinname, 
//                    }, { 
//                        field: "popularname",
//                        title: i18n.treespecie.grid.column.popularname, 
//                    }],
//                toolbar: [{ 
//                        name: "create",
//                        text: i18n.grid.button.create,
//                    }, {
//                        name: "save",
//                        text: i18n.grid.button.save,
//                    }, { 
//                        name : "cancel",
//                        text: i18n.grid.button.cancel,
//                    }],
//                sortable: true,
//                pageable: {
//                    input: true,
//                    refresh: true,
//                    pageSizes: [5,10,20,50,100],
//                    messages: i18n.grid.message
//                },
//                sortable: {
//                    mode: "multiple",
//                    allowUnsort: true
//                },
//                editable: true
//            });
//
//        
//        } // render: function()
//        
//
//    
//    });
    
    
    
    return treespecieTabView;
    
    
    
});